<template>
  <div>
    <!--轮播图-->
    <el-row>
      <el-col>
        <el-card v-if="true">
          <el-carousel :interval="5000">
            <el-carousel-item v-for="(banner,index) in banners"  :key="index">
              <img :src="banner.imageUrl" alt="轮播图" width="600" height="300">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>

    <!--热门文章推荐-->
    <div class="hot-articles">
      <h2>热门文章推荐</h2>
      <el-row>
        <el-col
            v-for="(article,index) in hotArticles"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
        >
          <el-card class="article-card">
            <img :src="article.imageUrl" alt="文章图片" width="80%">
            <div class="article-info">
              <h3 @click="goToArticleDetail(article.articleId)" style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
                  {{ article.title }}
              </h3>
              <p style="cursor: pointer" @click="goToAuthorPage(article.username)">
                <!--<i class="el-icon-user"></i>:-->
                <!-- 文章作者为登录人员时时，显示绿色标签，否则显示默认标签-->
                <el-tag v-if="article.username === userName" type="success" size="normal">
                  <i class="el-icon-user"></i>:
                  {{ article.username }}
                </el-tag>
                <el-tag v-else size="mini" style="cursor: pointer;">
                  <i class="el-icon-user"></i>:
                  {{ article.username }}
                </el-tag>
                <!--<el-tag type="success" size="normal">-->
                <!--  <i class="el-icon-user"></i>:-->
                <!--  {{ article.username }}-->
                <!--</el-tag>-->
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--最新文章列表-->
    <div class="latest-articles">
      <h2>最新文章列表</h2>
      <el-table :data="latestArticles">
        <el-table-column prop="title" label="标题">
          <!--点击标题跳转到文章详情页面-->
          <template slot-scope="scope">
            <span @click="goToArticleDetail(scope.row.articleId)" style="cursor: pointer;">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="作者">
          <!--文字高亮, 点击跳转-->
          <template slot-scope="scope">
            <!-- 文章作者为登录人员时时，显示绿色标签，否则显示默认标签-->
            <el-tag v-if="scope.row.username === userName" type="success" size="mini"
                     style="cursor: pointer;" @click="goToPersonalBlog">{{ scope.row.username }}</el-tag>
            <el-tag v-else size="mini" style="cursor: pointer;" @click="goToAuthorPage(scope.row.username)">{{ scope.row.username }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="标签">
          <!--显示在eltag-->
          <template slot-scope="scope">
            <!-- 没有标签不进行显示-->
            <template v-if="scope.row.tags==='' || scope.row.tags===null">
              <!--<el-tag style="margin-right: 5px;">{{ scope.row.tags}}</el-tag>-->
            </template>
            <!--文章标签只有一个时-->
            <template v-else-if="!scope.row.tags.toString().includes(',')">
              <el-tag style="margin-right: 5px;">{{ scope.row.tags}}</el-tag>
            </template>
            <template v-else>
              <el-tag v-for="(tag, index) in scope.row.tags.split(',')" :key="index" size="mini"
                      style="margin-right: 5px;">{{ tag }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="时间">
          <template slot-scope="scope">
            {{formatDate( scope.row.updateTime) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分类导航-->
    <div class="category-navigation">
      <h2>分类导航(尚未实现)</h2>
      <el-tag v-for="(category, index) in categories" :key="index"
              :type="randomTagType()" @click="filterArticlesByCategory(category)"
              style="cursor: pointer;">{{ category.name }}</el-tag>
    </div>
  </div>
</template>

<script>

import {getRandomImageUrl} from "@/plugins/commen";
import {get_HotArticleInfo, get_LatestArticleInfo} from "@/api/articleInfo";
import {getUserName} from "@/api/token";

export default {
  data() {
    return {
      userName:'',
      searchQuery: '',
      isLoggedIn: false,
      banners: [
        { id: 1, imageUrl: getRandomImageUrl() },
        { id: 2, imageUrl: getRandomImageUrl() },
        { id: 3, imageUrl: getRandomImageUrl() },
        { id: 4, imageUrl: getRandomImageUrl() },
        { id: 5, imageUrl: getRandomImageUrl() }
      ],
      hotArticles: [
        // { articleId: 185, title: '测试文章', username: '李康的测试文章', imageUrl: getRandomImageUrl() },
      ],
      latestArticles: [
        // { articleId: 3, title: '最新文章 1', username: '作者 1', updateTime: '2024-08-21' },
      ],
      categories: [
        { id: 1, name: '技术' },
        { id: 2, name: '生活' },
        { id: 3, name: '娱乐' },
        { id: 1, name: '技术' },
        { id: 2, name: '生活' },
        { id: 3, name: '娱乐' }
      ],
      // 随机生成用户头像 URL
      userAvatarUrl: getRandomImageUrl()
    };
  },
  mounted() {
    this.getUserName()
    this.getHotArticles()
    this.getLatestArticles()
  },
  methods: {
    /**
     * 获取用户名
     */
    getUserName(){
      this.userName = getUserName()
    },
    /**
     * 跳转个人信息页面
     */
    goToPersonalBlog() {
      this.$router.push('/index/personal-blog/userBasicInfo');
    },
    /**
     * 获取热门文章
     */
    getHotArticles() {
      get_HotArticleInfo().then((res)=>{
        this.hotArticles = res.data
        this.hotArticles.forEach((item)=>{
          item.imageUrl = getRandomImageUrl()
        })
        // 只保留数组的前四个
        this.hotArticles = this.hotArticles.slice(0,4)
      }).catch((err)=>{

      })
    },
    /**
     * 获取最新文章
     */
    getLatestArticles() {
      get_LatestArticleInfo().then((res)=>{
        this.latestArticles = res.data
        // console.log('最新文章',res.data)
      }).catch((err)=>{

      })
    },
    /**
     * 跳转到文章详情页面
     * @param id
     */
    goToArticleDetail(id) {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId:id
        }
      });
    },
    filterArticlesByCategory(category) {
      // 这里可以发起请求到后端根据分类筛选文章，然后更新文章列表等
    },
    /**
     * 随机生成 tag 类型
     * @returns {string}
     */
    randomTagType() {
      const types = ['primary', 'success', 'warning', 'danger'];
      return types[Math.floor(Math.random() * types.length)];
    },
    formatDate(time){
      // 加8个小时
      time = new Date(time).toLocaleString('zh-CN', {hour12: false})
      return time.replace('T',' ').substring(0,19)
    },
    /**
     * 跳转到作者页面
     */
    goToAuthorPage(authorName){
      this.$router.push({
        path: '/index/author-info',
        query: {
          authorName:authorName
        }
      })
    }
  }
};
</script>

<style scoped>

</style>